<template>
	<w-container :loading="loading" class="page-bg">
		<w-navbar title="订单详情"></w-navbar>
		<OrderStatus :order='order'></OrderStatus>
		<view class="info-container bg-color-item pa-16 br-t-12 mt-12">
			<entrustGoodsBar :order='order' />
			<GoodsInfo class='mt-24' :order='order' />
		</view>
		<view class="action">
			<view class="action-container" v-if="order.order_status==1">
				<!-- <w-button shape="circle" pain style="width: 260rpx;" @click='cancel'>{{handleLang('取消订单')}}</w-button> -->
				<w-button shape="circle" pain style="width: 260rpx;" @click='toMyCollection'>我的藏品</w-button>
				<w-button shape="circle" style="width: 400rpx;"
					@click='$refs.payOrder.pay'>{{handleLang('确认支付')}}</w-button>
			</view>
			<view class="action-container" v-if="order.order_status==2||order.order_status==7">
				<!-- <w-button shape="circle" pain style="width: 260rpx;" @click='cancelShow = true'>{{handleLang('取消委托')}}</w-button> -->
				<w-button shape="circle" pain style="width: 260rpx;" @click='toMyCollection'>我的藏品</w-button>
				<w-button shape="circle" style="width: 400rpx;" @click='toBeg'>{{handleLang('继续委托')}}</w-button>
			</view>
			<view class="action-container" v-if="order.order_status==3">
				<w-button shape="circle" pain style="width: 260rpx;" @click='toMyCollection'>我的藏品</w-button>
				<w-button shape="circle" style="width: 400rpx;" @click='toBeg'>{{handleLang('继续委托')}}</w-button>
			</view>
			<view class="action-container" v-if="order.order_status>=4&&order.order_status!=7">
				<w-button shape="circle" style="width: 100%;" @click='toBeg'>{{handleLang('继续委托')}}</w-button>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>
		<CancelEntrustOrder ref='cancelOrder' :order='order' />
		<PayEntrustOrder ref='payOrder' :order='order' />
		<w-toast v-model="cancelShow" :title="handleLang('取消委托')" :content="handleLang('取消委托只能取消未完成的委托订单，确认取消委托吗？')"
			content-align="center" @action='cancelEntrust' :cancelText="handleLang('我再想想')"
			:submitText="handleLang('确认取消')"></w-toast>
	</w-container>
</template>

<script>
	import {
		entrustOrderInfo,
		cancelEntrustOrder
	} from '@/api/trad/index.js'
	import OrderStatus from "../components/orderStatus.vue"
	import entrustGoodsBar from '../components/entrustGoodsBar.vue'
	import GoodsInfo from '../components/entrustGoodsInfo.vue'
	import CancelEntrustOrder from '../components/CancelEntrustOrder.vue'
	import PayEntrustOrder from '@/pages/market/components/PayEntrustOrder.vue'

	export default {
		components: {
			OrderStatus,
			entrustGoodsBar,
			GoodsInfo,
			CancelEntrustOrder,
			PayEntrustOrder
		},
		data() {
			return {
				loading: false,
				id: null,
				order: {},
				cancelShow: false
			}
		},
		onLoad({
			id
		}) {
			this.id = id;
			this.getInfo()
		},
		onPullDownRefresh() {
			this.getInfo()
		},
		methods: {
			cancel() {
				this.$nextTick(() => {
					this.$refs.cancelOrder.cancel()
				})
			},
			toBeg() {
				uni.navigateTo({
					url: `/pages/market/marketGoodsList?id=${this.order.goods_id}&goodsType=2&currentType=2`
				})
			},
			getInfo() {
				if (this.loading) return;
				this.loading = true;
				entrustOrderInfo(this.id).then(res => {
					uni.stopPullDownRefresh()
					this.order = res.data;
					this.order.goods_cover_image = this.order.goods_image
				}).finally(() => {
					this.loading = false;
				})
			},
			/**
			 * 取消委托
			 */
			cancelEntrust(e) {
				if (!e) return this.cancelShow = false
				uni.showLoading({
					title: '取消中...'
				})
				cancelEntrustOrder({
					order_id: this.order.id
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})
					setTimeout(() => {
						this.getInfo()
					}, 1000)
				})
			},
			toMyCollection() {
				let isApp = uni.getStorageSync('app');
				if (isApp) {
					let isIos = window.localStorage.getItem('ios')
					let action = JSON.stringify({
						action: "gotoActivity",
						params: {
							pageKey: 'my'
						}
					})
					if (isIos) {
						window.webkit.messageHandlers.callbackHandler.postMessage(action);
					} else {
						Android.webCallback(action)
					}
			
				} else {
					uni.switchTab({
						url: '/pages/my/my'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.action {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		box-sizing: border-box;
		@extend .bg-color-item;

		.action-container {
			@extend .flex, .flex-js-sb, .plr-16, .ptb-7;
		}
	}
</style>